import React from 'react'

export default function GeolocationUse() {
  const getLocation = () => {
    if (navigator.geolocation) {  //检测当前设备是否支持H5Geolocation API
      navigator.geolocation.getCurrentPosition(showMap, error);
      //检测结果存在地理定位对象的话，navigator.geolocation调用将返回该对象
      //第一个参数获取当前地理信息成功是执行的回调函数，带3个参数，
      //第一个参数是必写的，表示获取当前地理位置信息成功时所执行的回调函数，该函数参数position也是必须。
      //第二个参数是获取地理位置信息失败的回调函数，该函数的参数error也是必写的，
      // 第三个参数是一些可选属性列表（2、3个参数可省略）
    }
    else {
      alert("该浏览器不支持获取地理位置");
    }
  }
  const showMap = (position) => {  //.强调coords
    let cords = position.coords;
    console.log("cords", cords);
    let latitude = cords.latitude; //获取纬度
    let longitude = cords.longitude; //获取经度
    console.log(`当前位置经度为${longitude},纬度为${latitude}`);
  }
  const error = (error) => {  //.强调code
    let err = error.code;
    switch (err) {
      case 1: alert("用户拒绝了位置服务"); break;
      case 2: alert("获取不到位置信息"); break;
      case 3: alert("获取信息超时");
    }
  }
  return (
    <div>
      <button className='returnButton'><a href="/">点击返回主菜单</a></button>
      <h1>geolocation获取当前位置</h1>
      <button onClick={getLocation}>获取当前位置信息</button>
    </div>
  )
}
